<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input表单元素</title>
</head>
<body>
    <form action="cc.php" method="get">
        <!-- action="cc.php" method="get"是服务器部分 -->
        <!--text 文本框 用户可以在里面输入任何文字-->
        <label for="name">用户名：</label><input type="text"  name="username" value="请输入用户名" maxlength="6" id="name"><br>
        <!-- password 密码框 使输入文字隐藏 -->
        <!-- maxlength="6"用户名最多输入的最大字符 -->
        <label for="psd">密&nbsp;&nbsp;&nbsp;码：</label><input type="password" name="pwd" id="psd"><br>
        <!-- radio 单选按钮 实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同名字的name 才可以实现多选一 -->
        <!-- 单选按钮和复选框可以设置checked 属性，当页面打开时默认选中项 -->
        性 &nbsp;&nbsp;别：<input type="radio" name="sex" id="m" value="男"><label for="m">男</label> &nbsp;&nbsp;
        <input type="radio" name="sex" value="女" id="w"><label for="w">女</label> &nbsp;&nbsp;
        <input type="radio" name="sex" value="外星人" id="sex" checked="checked "><label for="sex">外星人</label>
        <!-- checkbox 复选框 实现多选 -->
        <br>
        爱&nbsp;&nbsp;&nbsp;好：<input type="checkbox" name="hobby" id="e"><label for="e">吃饭</label> &nbsp;&nbsp;
        <input type="checkbox" name="hobby" id="s"><label for="s">睡觉</label> &nbsp;&nbsp;
        <input type="checkbox" name="hobby" id="p"><label for="p">打游戏</label>
        <br>
        <!-- 点击提交，将表单域form中的表单元素中的值提交给后台服务器 -->
        <input type="submit" value="免费注册" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <!-- value="免费注册"是将“提交”两字修改 -->
        <!-- 重置按钮，还原表单元素初始状态 -->
        <input type="reset" value="重新填写">
        <br>      
        <!-- 普通按钮button 后期结合js-->
        <input type="button" value="获取某些信息">
        <br>
        <!-- 文件域 使用场景 上传文件时使用 -->
        上传头像：<input type="file">
    </form>
</body>
</html>